<template>
    <div>
        <Modal
         :title="model.id?'编辑商品':'添加商品'"
         :value="value"
         :width="95"
         @on-ok="save"
         @on-visible-change="visibleChange"
         :mask-closable="false"
        >
            <Form ref="commodityForm" :rules="commodityRule" :model="model" :label-width="100">
                <Tabs value="detail">
                    <TabPane label="商品信息" name="detail">
                        <FormItem label="商品ID" prop="id">
                            <Input v-model="model.id" size="small" :maxlength="32" :minlength="2" disabled w10 />
                        </FormItem>
                        <FormItem label="商品名称" prop="name">
                            <Input v-model="model.name" size="small" :maxlength="32" :minlength="2" w10 />
                        </FormItem>
                        <FormItem label="产品库" prop="commodityWareId">
                            <Select v-model="model.commodityWareId" size="small" placeholder="未选择" @on-change="commodityWareSelectOnChange" w7>
                                <Option v-for="item in commodityWares" :value="item.id" :key="item.id">{{item.name}}</Option>
                            </Select>
                        </FormItem>
                        <FormItem label="分类" prop="classes">
                            <commodity-class-select :model="model"></commodity-class-select>
                        </FormItem>
                        <FormItem label="标签" prop="tags">
                            <tags v-model="model.tags" w10></tags>
                        </FormItem>
                        <FormItem label="属性" prop="shelved">
                            <Checkbox v-model="model.shelved">上架</Checkbox>
                            <Checkbox v-model="model.isRecommended">推荐</Checkbox>
                            <Checkbox v-model="model.isEnabledShoppingOption">启用购物选项</Checkbox>
                        </FormItem>
                        <FormItem label="添加时间" prop="creationTime">
                            <Input :value="formatTimeStr(model.creationTime)" size="small" :maxlength="32" :minlength="2" disabled w10 />
                        </FormItem>
                        <p strong mgt2>交易信息</p>
                        <FormItem label="价格" prop="price" v-if="true||!model.isEnabledShoppingOption">
                            <InputNumber v-model="model.price" size="small" :min="0" w10 />
                        </FormItem>
                        <FormItem label="会员折扣" prop="discountable">
                            <Checkbox v-model="model.discountable">启用商品通用会员折扣</Checkbox>
                            <div v-if="model.discountable">
                                <Checkbox v-model="model.isDiscountPerLevel">启用商品独立会员折扣</Checkbox>
                                <table class="minitable" text-right>
                                    <tr>
                                        <th w5>会员等级</th>
                                        <th w5>折扣(%)</th>
                                        <th v-if="!model.isEnabledShoppingOption" w5>会员价(￥)</th>
                                    </tr>
                                    <tr v-for="(item, index) in memberLevels" :key="index">
                                        <td>{{item.name}}</td>
                                        <td>
                                            <InputNumber v-if="model.isDiscountPerLevel" v-model="discounts[item.level]" size="small" :min="0" long />
                                            <span v-else>{{item.discount * 100}}</span>
                                        </td>
                                        <td v-if="!model.isEnabledShoppingOption">
                                            {{formatPrice(model.price * (model.isDiscountPerLevel ? discounts[item.level] * 0.01 : item.discount))}}
                                        </td>
                                    </tr>
                                </table>
                                <p gray3>调整商品通用折扣，可前往“设置-会员设置-会员等级”设置</p>
                            </div>
                        </FormItem>
                        <div v-if="true||!model.isEnabledShoppingOption">
                            <FormItem label="当前库存量" prop="inventory">
                                <InputNumber v-model="model.inventory" size="small" :min="0" :precision="0" w7 />
                            </FormItem>
                            <FormItem label="起/限购量" prop="minLimitCount">
                                <InputNumber v-model="model.minLimitCount" size="small" :min="0" :precision="0" w4 />
                                <span gray4 pdx1>-</span>
                                <InputNumber v-model="model.maxLimitCount" size="small" :min="model.minLimitCount" :precision="0" w4 />
                            </FormItem>
                            <FormItem label="奖励积分" prop="xpValue">
                                <InputNumber v-model="model.xPValue" size="small" :min="0" :precision="0" w7 />
                            </FormItem>
                            <FormItem label="购物选项参数" v-if="model.isEnabledShoppingOption" prop="selectedShoppingOptionParameters">
                                <CheckboxGroup v-model="model.selectedShoppingOptionParameters">
                                    <Checkbox v-for="(item, index) in shoppingOptionParameters" :key="index" :label="item.name"></Checkbox>
                                </CheckboxGroup>
                            </FormItem>
                            <p strong mgt2>商品图片</p>
                            <Row>
                                <Col span="24" mgt2>
                                    <picture-single v-model="model" prop="picture"></picture-single>
                                </Col>
                                <Col span="24" mgt2>
                                    <picture-box v-model="model.pictures"></picture-box>
                                </Col>
                            </Row>
                        </div>
                        <FormItem label="购物选项参数" v-if="false&&model.isEnabledShoppingOption" prop="selectedShoppingOptionParameters">
                            <CheckboxGroup v-model="model.selectedShoppingOptionParameters">
                                <Checkbox v-for="(item, index) in shoppingOptionParameters" :key="index" :label="item.name"></Checkbox>
                            </CheckboxGroup>
                            <Button size="small" @click="handleAddShoppingOption">添加购物选项</Button>
                            <table class="minitable" v-for="(item, index) in model.shoppingOptions" :key="index" long>
                                <tr>
                                    <th v-for="(item2, index2) in model.selectedShoppingOptionParameters" :key="index2">{{item2}}</th>
                                    <th>价格</th>
                                    <th>库存量</th>
                                    <th>起购量</th>
                                    <th>限购量</th>
                                    <th>奖励积分</th>
                                    <th>操作</th>
                                </tr>
                                <tr>
                                    <td v-for="(item2, index2) in model.selectedShoppingOptionParameters" :key="index2">
                                        <Input v-model="item.shoppingOptionParameters[item2]" size="small" long />
                                    </td>
                                    <td><InputNumber v-model="item.price" size="small" :min="0" long /></td>
                                    <td><InputNumber v-model="item.inventory" size="small" :min="0" :precision="0" long /></td>
                                    <td><InputNumber v-model="item.minLimitCount" size="small" :min="1" :precision="0" long /></td>
                                    <td><InputNumber v-model="item.maxLimitCount" size="small" :min="1" :precision="0" long /></td>
                                    <td><InputNumber v-model="item.xpValue" size="small" :min="0" :precision="0" long /></td>
                                    <td><Button size="small" @click="handleDeleteShoppingOption(index)">删除</Button></td>
                                </tr>
                                <tr>
                                    <td :colspan="6+model.selectedShoppingOptionParameters.length">
                                        <picture-box v-model="item.pictures"></picture-box>
                                    </td>
                                </tr>
                            </table>
                        </FormItem>
                    </TabPane>
                    <TabPane label="商品规格" name="specification">
                        <div v-if="selectedCommodityWare == null">未选择产品库</div>
                        <div v-else-if="selectedCommodityWare.specificationParameters.length == 0">
                            仓库{{selectedCommodityWare.name}}未设置规格参数
                        </div>
                        <div v-else>
                            <p strong>{{selectedCommodityWare.name}}</p>
                            <FormItem v-for="(item, index) in selectedCommodityWare.specificationParameters"
                                :key="index" :label="item.name" :prop="item.name"
                            >
                                <Input v-model="model.specificationParameters[item.name]"
                                    size="small" :maxlength="32" :minlength="2" w10
                                />
                            </FormItem>
                        </div>
                    </TabPane>
                    <TabPane label="商品描述" name="description" pd1>
                        <editor :model="model" prop="description"></editor>
                    </TabPane>
                    <TabPane label="营销" name="marketing">
                        <div v-if="model.id">

                        </div>
                        <div v-else>产品还未创建，无法应用营销方案</div>
                    </TabPane>
                </Tabs>
            </Form>
            <div slot="footer">
                <Button @click="cancel">取消</Button>
                <Button @click="save" type="primary">{{model.id?'保存':'添加'}}</Button>
            </div>
        </Modal>
    </div>
</template>
<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import Util from '../../lib/util'
import AbpBase from '../../lib/abpbase'
import PictureSingle from '@common/components/picture-single.vue'
import PictureBox from '@common/components/picture-box.vue';
import Tags from '@common/components/tags.vue';
import CommodityClassSelect from '../../components/common/commodity-class-select.vue'
import Editor from '../../components/common/editor.vue'
import CommodityWare from '@/store/entities/commodity-ware';

@Component({
    components: {
        PictureSingle, PictureBox, CommodityClassSelect, Editor, Tags
    }
})
export default class CreateCommodity extends AbpBase{
    @Prop({type:Boolean,default:false}) value:boolean;
    @Prop() model:any;
    discounts:any = {};
    get commodityWares(){
        return this.$store.state.setting.settings.commodityWares;
    }
    get shoppingOptionParameters() {
        return this.$store.state.setting.settings.shoppingOptionParameters.map(elem => {
            return {
                name: elem.name,
                selected: false
            }
        });
    }
    get selectedCommodityWare() {
        return this.commodityWares.find(elem => elem.id == this.model.commodityWareId);
    }
    get memberLevels() {
        return this.$store.state.setting.settings.memberLevels;
    }
    commodityWareSelectOnChange(value) {
        if(!this.selectedCommodityWare) return;
        this.selectedCommodityWare.specificationParameters.forEach(elem => {
            this.$set(this.model.specificationParameters, elem.name, "");
        });
    }
    save(){
        (this.$refs.commodityForm as any).validate(async (valid:boolean) => {
            if(valid){
                for(var key in this.discounts) {
                    this.model.discounts[key] = this.discounts[key] * 0.01;
                }
                if(!this.model.id) {
                    let response = await this.post("Commodity/CreateCommodity", this.model);
                    if(response.success) {
                        (this.$refs.commodityForm as any).resetFields();
                        this.$emit('save-success');
                        this.$emit('input',false);
                    }
                }else {
                    let response = await this.put("Commodity/UpdateCommodity", this.model);
                    if(response.success) {
                        (this.$refs.commodityForm as any).resetFields();
                        this.$emit('save-success');
                        this.$emit('input',false);
                    }
                }
            }
        })
    }
    cancel(){
        (this.$refs.commodityForm as any).resetFields();
        this.$emit('input',false);
    }
    visibleChange(value:boolean) {
        if(!value){
            this.$emit('input',value);
        }
    }
    handleAddShoppingOption() {
        this.model.shoppingOptions.push({
            price: 0,
            xpValue: 0,
            inventory: 0,
            minLimitCount: 1,
            maxLimitCount: 1,
            pictures: [],
            shoppingOptionParameters: {}
        });
    }
    handleDeleteShoppingOption(index) {
        this.model.shoppingOptions.splice(index, 1);
    }
    handleOnSelectedImage(items) {
        this.model.pictures = items.map(elem => elem.url);
    }
    commodityRule={
        name:[{required: true,message:"请添加商品名称",trigger: 'blur'}]
    }
    @Watch('model')
    handleOnModelChange() {
        for(var key in this.model.discounts) {
            this.discounts[key] = this.discounts[key] * 100;
        }
    }
}
</script>